<template>
    <div class="company-manage-dialog-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form ref="ruleFormRef" :model="formData" :rules="ruleForm" label-width="120px">
                <div class="form-item-box-one">
                    <div>
                        <el-form-item label="公司名称" prop="companyName">
                            <el-input
                                v-model="formData.companyName"
                                @input="value => (formData.companyName = value.trim())"
                                @blur="generateJianpin"
                                placeholder="请输入公司名称（简称）"
                                :disabled="props.readonly"
                                maxlength="50"
                            />
                        </el-form-item>
                        <el-form-item label="公司全称" prop="companyFullName">
                            <el-input
                                v-model="formData.companyFullName"
                                @input="value => (formData.companyFullName = value.trim())"
                                placeholder="请输入公司全称"
                                :disabled="props.readonly"
                                maxlength="50"
                            />
                        </el-form-item>
                        <el-form-item label="联系人" prop="contactPerson">
                            <el-input
                                v-model="formData.contactPerson"
                                @input="value => (formData.contactPerson = value.trim())"
                                placeholder="请输入联系人"
                                :disabled="props.readonly"
                                maxlength="50"
                            />
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="公司ID" prop="companyId">
                            <el-input v-model="formData.companyId" placeholder="系统自动生成" disabled />
                        </el-form-item>
                        <el-form-item label="公司简拼" prop="companyBriefName">
                            <el-input
                                v-model="formData.companyBriefName"
                                @input="value => (formData.companyBriefName = value.trim())"
                                placeholder="请输入公司简拼"
                                :disabled="props.readonly"
                                maxlength="50"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="contactPhone">
                            <el-input
                                v-model="formData.contactPhone"
                                @input="value => (formData.contactPhone = value.trim())"
                                placeholder="请输入联系电话"
                                :disabled="props.readonly"
                                maxlength="50"
                            />
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="公司地址" prop="companyAddress">
                    <el-input
                        v-model="formData.companyAddress"
                        maxlength="200"
                        show-word-limit
                        placeholder="请输入地址"
                        :disabled="props.readonly"
                    />
                </el-form-item>
                <div class="form-item-box-one">
                    <div>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="formData.status" :disabled="props.readonly">
                                <el-radio
                                    v-for="(value, key) in sys_normal_disable"
                                    :label="value.label"
                                    :key="key"
                                    :value="value.value"
                                ></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="显示顺序">
                            <el-input-number
                                v-model="formData.seq"
                                :precision="0"
                                :min="1"
                                style="width: 100%"
                                align="left"
                                controls-position="right"
                                placeholder="请输入显示顺序"
                                :disabled="props.readonly"
                            />
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="描述" prop="description">
                    <el-input
                        v-model="formData.description"
                        maxlength="200"
                        show-word-limit
                        type="textarea"
                        placeholder="请输入描述"
                        :disabled="props.readonly"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import type { CompanyVO } from '@great/services';
import { systemCompanyService } from '@great/services';
import { reactive, ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { getPinyinInitials } from '@/utils/ruoyi';
import { useRequest } from 'vue-request';

const { proxy } = getCurrentInstance() as any;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));

interface IProps extends PopupBoxProps {
    row?: CompanyVO;
    getList?: () => Promise<void>;
    readonly?: boolean;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: CompanyVO;
}
const dialog = reactive<Dialog>({
    title: '新建公司',
    width: 900,
    detail: undefined
});

const formData = reactive<CompanyVO>({
    companyId: '', // 公司id
    companyName: '', // 公司名称（简称）
    companyCode: '', // 标识符
    companyFullName: '', // 公司全称
    companyBriefName: '', // 公司简拼
    contactPerson: '', // 联系人
    contactPhone: '', // 联系电话
    companyAddress: '', // 公司地址
    description: '', // 公司描述
    status: '0', // 状态
    seq: undefined // 显示顺序
});

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormRules>({
    companyName: [{ required: true, message: '请输入公司名称', trigger: ['blur', 'change'] }],
    status: [{ required: true, message: '请选择状态', trigger: ['blur', 'change'] }]
});

// 根据公司简称生成简拼
const generateJianpin = () => {
    formData.companyBriefName = getPinyinInitials(formData.companyName);
};

// 是否为编辑
const isEdit = (par?: boolean): boolean => {
    if (par === undefined) {
        return dialog.title.includes('修改');
    } else {
        return dialog.title.includes('修改') && par;
    }
};

// 提交接口请求
const { run, loading } = useRequest(
    () => {
        return systemCompanyService[isEdit() ? 'updateCompany' : 'addCompany'](formData);
    },
    {
        manual: true,
        onSuccess(res) {
            ElNotification({
                title: isEdit() ? '修改成功！' : '创建成功！',
                type: 'success'
            });
            closeDialog();
        }
    }
);
// 表单提交
const submitForm = () => {
    if (props.readonly) {
        closeDialog();
        return;
    }
    ruleFormRef.value?.validate(valid => {
        valid && run();
    });
};

//关闭弹框
const closeDialog = () => {
    props.close();
    if (props.getList) props.getList();
};

// 打开弹框
const openDialog = () => {
    if (props.row) {
        if (props.readonly) {
            dialog.title = '查看公司详情';
        } else {
            dialog.title = '修改公司信息';
        }
        dialog.detail = JSON.parse(JSON.stringify(props.row));
        formData.companyId = props.row.companyId;
        Object.keys(formData).forEach(key => {
            formData[key] = (props.row as CompanyVO)[key];
        });
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.company-manage-dialog-modal-wrapper {
    .el-form {
        .form-item-box-one {
            display: flex;
            justify-content: space-between;
            > div {
                width: calc((100% - 10px) / 2);
            }
        }
    }
}
</style>
